<script setup>
//404页
//图标
import { Close } from "@element-plus/icons-vue";
import StatusStore from "@/store/status";
//实例化
const store = StatusStore();
</script>

<template>
  <!--
  <el-button type="primary" size="default" @click="store.changeAd">
    展示广告
  </el-button >
-->
  <aside class="desktop-notification" :class="{ open: store.ad.indexTop }">
    <div id="sdn-content" class="sdn-content">
      <div class="banner-copy" style="display: block;">
        <p>
          <h3>本页面是SFC单文件前端，使用WordPress做后端，通过rest API进行数据沟通。</h3>
          <h5>目前还在不断完善中，敬请期待！</h5>
        </p>
          <p>
          <details>
            <summary>使用技术</summary>
            <ol>
          
          <li>   "@element-plus/icons-vue": "^2.1.0",</li>
          <li>   "axios": "^1.3.4",</li>
          <li>   "element-plus": "^2.2.33",</li>
          <li>   "less": "^4.1.3",</li>
          <li>   "less-loader": "^11.1.0",</li>
          <li>   "moment": "^2.29.4",</li>
          <li>   "pinia": "^2.0.33",</li>
          <li>   "pinia-plugin-persistedstate": "^3.1.0",</li>
          <li>   "qs": "^6.11.1",</li>
          <li>   "vue": "^3.2.45",</li>
          <li>   "vue-axios": "^3.5.2",</li>
          <li>   "vue-qr": "^4.0.9",</li>
          <li>   "vue-router": "^4.1.6"</li>
                  </ol>
        </details>
        <details>
            <summary>开发技术</summary>
           <ol>
  <li>          "@types/node": "^18.15.0",</li>
  <li>  "@vitejs/plugin-vue": "^4.0.0",</li>
  <li>  "mockjs": "^1.1.0",</li>
  <li>  "typescript": "^4.9.5",</li>
  <li>  "vite": "^4.1.0",</li>
  <li>  "vite-plugin-mock": "^2.9.6"</li>
           </ol>
        </details>
      </p>
  
          



        
      </div>

      <el-button
        id="sdn-dismissal"
        class="icon-close"
        :icon="Close"
        circle
        @click="store.changeAd"
      />
    </div>
  </aside>
</template>

<style lang="less" scoped>
.page-article {
  .desktop-notification {
    padding-top: 16px;
    padding-bottom: 24px;

    //////
    //visibility: visible;
    .sdn-content {
      background-color: #fff;
    }
  }
  .sdn-content {
    background-color: #f5f5f7;
    /////////
    //display: block;

    opacity: 1;
    .banner-copy {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }
    .banner-trigger {
      color: #06c;
    }
    .icon-close {
      font-size: 14px;
      line-height: 0;

      margin-top: -24px;
      margin-bottom: -24px;
      flex: none;
    }
  }
}

//公共
.desktop-notification {
  display: flex;
  justify-content: center;
  color: #1d1d1f;
  box-sizing: border-box;
  margin-bottom: 0;
  transition: margin-bottom 310ms cubic-bezier(0.25, 0.01, 0.25, 1);
  visibility: hidden;
  font-size: 12px;
  line-height: 1.33337;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
}

.sdn-content {
  display: none;
  justify-content: space-between;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  width: 980px;
  border-radius: 10px;
  padding: 24px 0 24px 24px;
  opacity: 0;
  transition: opacity 310ms ease-in-out;
}

//开启展示
.open {
  visibility: visible;
  .sdn-content {
    display: block;
  }
}
@media only screen and (max-width: 1068px) {
  .sdn-content {
    margin-left: auto;
    margin-right: auto;
    width: 692px;
  }
}
@media only screen and (max-width: 734px) {
  .sdn-content {
    max-width: 366px;
  }
}
</style>
